<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>jQuery表格展开折叠，默认折叠</title>
  <style>
    table {
      border: 0;
      border-collapse: collapse;
    }

    td {
      font: normal 12px/17px Arial;
      padding: 2px;
      width: 100px;
    }

    th {
      font: bold 12px/17px Arial;
      text-align: left;
      padding: 4px;
      border-bottom: 1px solid #333;
      width: 100px;
    }

    .parent {
      background: #FFF38F;
      cursor: pointer;
    }

    /* 偶数行样式*/
    .odd {
      background: #FFFFEE;
    }

    /* 奇数行样式*/
    /* .selected{ background:#FF6500;color:#fff;} */
  </style>
  <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      var t = 0;
      $(".parent").click(function () {
        // 原版
        // $(this).toggleClass("selected");
        // $(this).siblings().not(".parent").not(":first-child").hide();
        // $(this).next().show().next().show();
        t = t + 1;
        switch (t % 2) {
          case 0: $(this).siblings().not(".parent").not(":first-child").show();
            $(this).next().hide().next().hide();
            console.log("隐藏下部");
            break;
            
          case 1: $(this).siblings().not(".parent").not(":first-child").show();
            $(this).next().show().next().show();
            console.log("全部展开"); break;
        }
      });
    })
  </script>
</head>

<body>
  <table>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>暂住地</th>
    </tr>
    <tr class="parent" id="row_01">
      <td>张山</td>
      <td>男</td>
      <td>浙江宁波</td>
    </tr>
    <tr class="child_row_01">
      <td>张山</td>
      <td>男</td>
      <td>浙江宁波</td>
    </tr>
    <tr class="child_row_01">
      <td>李四</td>
      <td>女</td>
      <td>浙江杭州</td>
    </tr>
    <tr class="parent" id="row_02">
      <td colspan="3">前台开发组</td>
    </tr>
    <tr class="child_row_02">
      <td>王五</td>
      <td>男</td>
      <td>湖南长沙</td>
    </tr>
    <tr class="child_row_02">
      <td>找六</td>
      <td>男</td>
      <td>浙江温州</td>
    </tr>
    <tr class="parent" id="row_03">
      <td colspan="3">后台开发组</td>
    </tr>
    <tr class="child_row_03">
      <td>Rain</td>
      <td>男</td>
      <td>浙江杭州</td>
    </tr>
    <tr class="child_row_03">
      <td>MAXMAN</td>
      <td>女</td>
      <td>浙江杭州</td>
    </tr>
  </table>
</body>

</html>